import {ViewStyle, StyleSheet, TextStyle, ImageStyle} from 'react-native'
import {translateSize, themeColors, definedColors} from 'styles'

interface InputIdentityStyle {
  container: ViewStyle
  typeContainer: ViewStyle
  typeContent: TextStyle
  typeIcon: ImageStyle
  btn: ViewStyle
  btnContent: TextStyle
}

const inputIdentityStyle = StyleSheet.create<InputIdentityStyle>({
  container: {
    paddingTop: translateSize(20),
    paddingHorizontal: translateSize(32),
  },
  typeContainer: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: translateSize(80),
    borderRadius: translateSize(8),
    height: translateSize(74),
    borderWidth: 1,
    borderColor: themeColors.divider,
    backgroundColor: '#e5e5e5',
  },
  typeContent: {
    fontSize: translateSize(32),
    color: themeColors.title,
    paddingLeft: translateSize(32),
    paddingVertical: translateSize(20),
  },
  typeIcon: {
    paddingHorizontal: translateSize(32),
  },
  btn: {
    marginTop: translateSize(150),
  },
  btnContent: {
    color: definedColors.white,
    fontSize: translateSize(32),
  },
})

interface IdentityDetailStyle {
  container: ViewStyle
  baseInfoContainer: ViewStyle
  avatar: ImageStyle
  baseContentContainer: ViewStyle
  baseContentTitle: TextStyle
  baseContent: TextStyle
  empty: ViewStyle
  btnContainer: ViewStyle
  btn: ViewStyle
  btnContent: TextStyle
}

const identityDetailStyle = StyleSheet.create<IdentityDetailStyle>({
  container: {
    height: '100%',
  },
  baseInfoContainer: {
    flexDirection: 'row',
    paddingLeft: translateSize(100),
    paddingVertical: translateSize(50),
    height: translateSize(270),
  },
  avatar: {
    height: '100%',
    width: translateSize(120),
  },
  baseContentContainer: {
    height: '100%',
    flexDirection: 'column',
    justifyContent: 'space-between',
    marginLeft: translateSize(50),
  },
  baseContentTitle: {
    flexDirection: 'row',
    fontSize: translateSize(28),
    color: definedColors.gray92,
    paddingRight: translateSize(40),
  },
  baseContent: {
    fontSize: translateSize(28),
    color: themeColors.title,
  },
  empty: {
    height: translateSize(32),
    backgroundColor: themeColors.pageBg,
  },
  btnContainer: {
    flexDirection: 'row',
    marginTop: translateSize(80),
    paddingHorizontal: translateSize(32),
    justifyContent: 'space-between',
  },
  btn: {
    width: '40%',
  },
  btnContent: {
    fontSize: translateSize(32),
    color: definedColors.white,
  },
})

interface IDCardIdentityStyle {
  container: ViewStyle
  hintContainer: ViewStyle
  hintIcon: ImageStyle
  hintTitle: TextStyle
  hintContent: TextStyle
  btnTiltle: TextStyle
  btnContainer: ViewStyle
  btnContent: TextStyle
  btn: TextStyle
  cardImage: ImageStyle
  hintFont: TextStyle
}

const idCardIdentityStyle = StyleSheet.create<IDCardIdentityStyle>({
  container: {
    height: '100%',
    backgroundColor: definedColors.navy,
    alignItems: 'center',
    padding: translateSize(47),
  },
  hintContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: -translateSize(150),
  },
  hintFont: {
    paddingVertical: translateSize(10),
    fontSize: translateSize(50),
    fontWeight: 'bold',
    color: definedColors.white,
  },
  cardImage: {
    width: translateSize(656),
    height: translateSize(624),
  },
  hintIcon: {
    width: translateSize(48),
    height: translateSize(48),
  },
  hintTitle: {
    textAlign: 'center',
    fontSize: translateSize(36),
    color: '#1A1A1A',
  },
  hintContent: {
    textAlign: 'center',
    fontSize: translateSize(38),
    color: definedColors.white,
    marginTop: translateSize(40),
  },
  btnTiltle: {
    width: translateSize(200),
    textAlign: 'center',
  },
  btnContainer: {
    textAlign: 'center',
    width: '100%',
    alignItems: 'center',
    backgroundColor: definedColors.navy,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  btnContent: {
    textAlign: 'center',
    fontSize: translateSize(28),
    color: definedColors.white,
    marginTop: translateSize(40),
    width: 60,
  },
  btn: {
    fontSize: translateSize(40),
    color: definedColors.yellow,
    paddingTop: translateSize(35),
    paddingHorizontal: translateSize(12),
    // textDecorationLine: 'underline'
  },
})

export {inputIdentityStyle, identityDetailStyle, idCardIdentityStyle}
